<template>
	<view>
		<view class="title">
			<view>下单人</view>
			<view>订单金额</view>
			<view>下单时间</view>
			<view>奖励(元)</view>
			<view>订单状态</view>
		</view>
		<view style="height: 80rpx;"></view>
		<view class="content" v-if="list.length">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view>{{item.nickname}}</view>
				<view>¥{{item.price}}</view>
				<view>{{item.time}}</view>
				<view>{{item.percentage}}</view>
				<view v-if="item.state=='未付款'" style="color:#FF0000">{{item.state}}</view>
				<view v-if="item.state=='已付款'" style="color:#007AFF">{{item.state}}</view>
				<view v-if="item.state=='已发货'" style="color:#FFA500">{{item.state}}</view>
				<view v-if="item.state=='已签收'" style="color:#9ACD32">{{item.state}}</view>
				
			</view>

		</view>
		
		<view class="nodata" v-else>
			<view class="fonticon icon" >
				&#xe602;
			</view>
			<view class="txt">
				暂无数据
			</view>
		</view>
		
	</view>
</template>

<script>
	// 接口相关
	import _function from '@/common/_function.js'
	import api from '@/common/api.js'
	
	export default {
		data() {
			return {
				list:[],
				page:1,
			};
		},
		async onLoad() {
			const res = await _function.request(api.getsubordinate,{
				page:this.page
			})
			if(res.data.code==200){
				if(res.data.data!='null'){
					this.list = res.data.data
				}
			}
		},
		//下拉加载
		async onReachBottom(){
			this.page++
			const res = await _function.request(api.getsubordinate,{
				page:this.page
			})
			if(res.data.code==200){
				if(res.data.data!='null'){
					this.list = this.list.concat(res.data.data)
				}else{
					uni.showToast({
					    title: '没有更多数据了',
					    duration: 2000,
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.title {
		position: fixed;
		top: 0;
		width: 100%;
		
		display: flex;
		align-items: center;
		height: 80rpx;
		background-color: #D6EAF5;
		color: #0081FF;

		&>view {
			width: 20%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	
	.content{
		.item{
			height: 80rpx;
			display: flex;
			&>view {
				width: 20%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}		
	.nodata {
		height: 800rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.icon{
			font-size: 80rpx;
		}
		.txt{
			font-size: 40rpx;
		}
	}
</style>
